<template>
  <view class="pa-16" :class="[getClass]">
    <view class="fz-24 mb-12">
      <text>{{ getStatusText }}</text>
    </view>
    <view class="fz-14 mb-12">
      <text>提交时间：{{ applicationTime }}</text>
    </view>
    <view v-if="approvalRemark" class="mb-12 fz-14">
      <text>不合适原因：{{ approvalRemark }}</text>
    </view>
    <view
      class="pa-12 disFlxAC br-8"
      style="background-color: #f2f3f5"
      @click="toSupplyDemandDetails"
    >
      <TImage
        v-if="boType === BoTypeEnum.Supply"
        class="flex-shrink-0 mr-4"
        src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/gong.png"
        width="40rpx"
        height="40rpx"
      />
      <TImage
        v-else
        class="flex-shrink-0 mr-4"
        src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/xu.png"
        width="40rpx"
        height="40rpx"
      />
      <text class="fz-14 default-color flex-1 ov-1">{{ title }}</text>
      <text class="ali-icon fz-16 ml-12" style="color: #969799">&#xe67b;</text>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { BoTypeEnum, IntentionStatusEnum } from '@/enums/businessOpportunitiesEnum';
  import { computed, type PropType } from 'vue';
  import { IntentionStatusText } from '../../intentionManage';
  import TImage from '@/components/TImage/index.vue';
  import { navigateTo } from '@/router';
  import { propTypes } from '@/utils/propTypes';

  const props = defineProps({
    status: Number as PropType<IntentionStatusEnum>,
    /** 供需类型 */
    boType: Number as PropType<BoTypeEnum>,
    /** 供需标题 */
    title: propTypes.string,
    /** 供需id */
    boInfoId: propTypes.number,
    /** 申请时间 */
    applicationTime: propTypes.string,
    /** 不合适的备注 */
    approvalRemark: propTypes.string
  });

  const getStatusText = computed(() => {
    return IntentionStatusText[props.status!];
  });

  const getClass = computed(() => {
    switch (props.status) {
      case IntentionStatusEnum.pending:
      case IntentionStatusEnum.hold:
        return 'color1';
      case IntentionStatusEnum.success:
        return 'color2';
      case IntentionStatusEnum.unsuitable:
        return 'color3';
      default:
        return '';
    }
  });

  function toSupplyDemandDetails() {
   props.boInfoId && navigateTo({ name: 'supplyDemandDetails', options: { id: props.boInfoId } });
  }
</script>

<style lang="scss" scoped>
  .color1 {
    background-color: #e29942;
    color: #fff;
  }
  .color2 {
    background-color: #2878ff;
    color: #fff;
  }
  .color3 {
    background-color: #fff;
    color: #333;
  }
</style>
